/* common styling */ 
div#menu {
	position:relative;
	height: 30px;
	width: auto;
	text-align:center;
	margin:0 auto;
	font:bold 11pt arial;
    background-color: #75a8d7;
   	background-image: url(../img/bar.jpg);
	background-repeat: repeat-x;
} 
div#menu ul li a, div#menu ul li a:visited {
    display:block; 
	text-decoration:none; 
	height:28px; 
	text-align:center; 
	color:#fff; 
	border-top:1px solid #fff; 
	border-left:1px solid #fff; 
	border-right:1px solid #fff; 
	line-height:28px; 
	font-size:10pt; 
	overflow: hidden;
} 	
div#menu ul {padding:0; margin:0;list-style-type: none;} 
div#menu ul li {
	float:left;
	width:25%;
	list-style-type: none;
	position: relative;
}

/* 2 level menu set the width automaticly according to the content */
div#menu li li{width:250px; float:none; }
div#menu li ul {display: none;} 

/*  2 level menu link style  */
div#menu li li a, div#menu li li a:visited{padding-left:6px; text-align: left; font-size:9pt;} 

/* menubar style */
div#menu li.menubar {background: transparent url(../img/arrow.gif) right center no-repeat; }

div#menu li.menubar:hover {margin-bottom:-3px;}

/* specific to non IE browsers */ 
/* 1 level menu color */
div#menu li.system {color:#000000; background-image: url(../img/menu_bg.gif); } 
div#menu li:hover {color:#000000; background:#b0d4e7;} 

/* 2 level menu color */
div#menu li:hover li {background-color:#1c3774; color:#FFFFFF;} 
div#menu li li:hover {background-color:#91b2c9; color:#13284F; background-image: url(../img/bg.gif);} 

/* the magic */
div#menu li:hover li ul, div#menu li.left:hover li ul, div#menu li.right:hover li ul {display:none;}
div#menu li:hover li:hover li ul{display: none;} 

div#menu li.left:hover ul{display:block; position:absolute; top:29px; left:0px;}
div#menu li.right:hover ul{display:block; position:absolute; top:29px; right:0px;} 

div#menu li.left li:hover ul{display:block; position:absolute; left:250px; top:0;} 
div#menu li.left li li:hover ul{display:block; position:absolute; left:250px; top:0;} 

div#menu li.right li:hover ul{display:block; position:absolute; left:-250px; top:0;} 
div#menu li.right li li:hover ul{display:block; position:absolute; left:-250px; top:0;} 